<template>
  <div class="Pages">
    <div class="loginPage">
      <h3>登录11</h3>

      <el-form
        :model="loginForm"
        :rules="loginRules"
        label-suffix=":"
        ref="ruleForm"
        label-width="100px"
        class="elForm"
      >
        <el-row type="flex">
          <el-form-item label="账号" prop="user">
            <el-input
              v-model="loginForm.account"
              maxlength="16"
              show-word-limit
              small
              clearable
            >
              <!-- :disabled="[0, 1, 2,3,4].includes(loginForm.key) ? false : true" -->
            </el-input>
          </el-form-item>

          <!-- <el-select
            v-model="value"
            placeholder="请选择角色"
            clearable
            filterable
            size="middle"
            class="selects"
            autocomplete="off"
            @change="selectChange"
            @clear="selectClear"
          >
            <el-option
              v-for="item in optiones"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select> -->
        </el-row>

        <el-row type="flex">
          <el-form-item label="密码" prop="pass">
            <el-input
              v-model="loginForm.pass"
              maxlength="13"
              show-word-limit
              show-password
              small
              clearable
            >
              <!-- :disabled="[0, 1, 2].includes(loginForm.key) ? false : true" -->
            </el-input>
          </el-form-item>
        </el-row>

        <el-form-item>
          <el-button type="primary" @click="handleLogin('ruleForm')">
            登录
          </el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="tset"></div>

    <!-- <div class="flexEd">
      <div v-for="(e, i) in userList" :key="i">
        <div class="flex">
          账号： {{ e.account }}
          <div class="dis" @click="toCopy(e.account)">一键复制</div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getWord, getRnumRepetition, copyContent } from '../../utils/utils.js'
import { decrypt, encrypt } from '@/utils/encrypt'
import { logins } from '../../../mock/login.js'
import loginInfo from './index.js'
import roleInfo from '../pages/role/role'
import router from '../../router/index'
import activeRoute from '@/router/activeRoute'

export default {
  name: 'login',
  components: {},
  props: {},
  data() {
    var checkUser = (rule, value, callback) => {
      if (!value) {
        const msg = rule.field.user ? '账号不能为空' : '密码不能为空'
        return callback(new Error(msg))
      }
      // var reg = /^[A-Za-z0-9]+$/
      // if (!reg.test(value)) {
      //   callback(new Error('请输入数字'))
      // } else {
      //   callback()
      // }
    }

    return {
      loginForm: {
        account: '',
        pass: '',
      },

      loginRules: {
        // user: [
        //   { required: true, message: '请输入账号', trigger: 'change' },
        //   { validator: checkUser, trigger: 'blur' },
        // ],
        // pass: [
        //   { required: true, message: '请输入密码', trigger: 'change' },
        //   { validator: checkUser, trigger: 'blur' },
        // ],
      },
      value: '0',
      userInfo: {},
      add: 0,
    }
  },
  computed: {
    ...mapState(['login', 'user']),

    optiones() {
      return loginInfo
    },

    userList() {
      const lists =
        this.user?.userList?.length > 0 ? this.user.userList : loginInfo
      return lists
    },

    roleList() {
      const lists =
        this.user?.roleList?.length > 0 ? this.user.roleList : roleInfo
      return lists
    },
  },
  watch: {
    add: {
      handler(newValue, old) {
        // console.log('router', router)console.log('config', config)
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // console.log('router', router)
    var d = 200 + 'px'
  },
  mounted() {
    this.loginForm.account = loginInfo[0].account
    this.loginForm.pass = loginInfo[0].pass
  },
  methods: {
    handleLogin(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const getWordList = getWord(26)
          const index = getRnumRepetition(26)
          const numIndexs = index.slice(index.length - 4, index.length)

          const arry = []
          for (var i = 0; i < numIndexs.length; i++) {
            arry.push(getWordList[numIndexs[i]])
          }
          const token =
            // 'Bearer' +
            // ' ' +
            arry.join('') + Math.floor(Math.random() * 1000000000)

          // console.log('加密', encrypt(token))
          // console.log('解密', decrypt(encrypt(token)))

          // logins(this.userInfo).then((res) => {
          //   console.log('login信息', res)
          // })

          this.axios
            .post('/cjp/isc/logins', {
              ...this.userInfo,
              token: encrypt(token),
            })
            .then((res) => {
              console.log('login信息', res)
              if (res.status == 200) {
                this.$store.commit('setUserList', this.userList)

                this.$store.commit('setRoleList', this.roleList)

                const getMenus = [
                  '首页',
                  '个人中心',
                  '权限设置',
                  '角色设置',
                  '用户设置',
                  '测试页面',
                  '工作经验',
                  '设置',
                ]

                // this.$store.commit('setMenues', setMenus)
                this.$store.commit('getMenues', getMenus)

                let logonData = {}
                // 登录的用户信息
                this.userList.forEach((e) => {
                  if (e.account == this.loginForm.account) {
                    // console.log('e', e)
                    logonData = e
                  }
                })

                console.log('logonData', logonData)

                // 登录用户的信息的角色信息
                let menu = []
                this.roleList.forEach((el) => {
                  if (el.key == logonData.key) {
                    console.log('el', el)
                    menu.push(el)
                  }
                })
                console.log('menu', menu)

                const vuexDate = {
                  ...logonData,
                  token: encrypt(token),
                }

                console.log('vuexDate', vuexDate)

                this.$store.commit('loginInfo', vuexDate)
                // this.$store.commit('setRouterChecked', menu.checked)

                this.$router.push({ path: '/' })
              } else {
                return this.$message.error('登录失败')
              }
            })
        }
      })
    },

    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.loginForm = {}
      this.userInfo = {}
    },

    selectChange(e) {
      loginInfo.forEach((el) => {
        if (el.id == e) {
          this.userInfo = el
          this.loginForm = el
          console.log('this.userInfo', this.userInfo)
        }
      })
    },

    selectClear() {
      this.loginForm = loginInfo[0]
      this.userInfo = loginInfo[0]
    },

    toCopy(e) {
      console.log('e', e)
      copyContent(e)
    },
  },
}
</script>

<style scoped lang="scss">
:root {
  --d: 20px;
}
.Pages {
  display: flex;
  justify-content: center;
  background: #fff url('../../assets/images/yinling.jpg') no-repeat center
    center;
  background-size: cover;
  height: 100%;

  @keyframes forms {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.3;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes zoomInss {
    from {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }

    50% {
      opacity: 1;
    }
  }

  .content {
    width: 480px;
    height: 270px;
    border-radius: 10px;
    background: #fff;
    padding: 20px 50px 0 10px;
    z-index: 999;
  }

  .loginPage {
    margin-top: 200px;
    height: 270px;
    border-radius: 10px;
    background: #fff;
    padding: 20px 50px 0 10px;
    opacity: 0.8;
    animation: 3s zoomInss;
    h3 {
      padding-bottom: 20px;
      text-align: center;
    }
    .elForm {
      .el-row {
        margin-bottom: 22px;
        .el-form-item {
          margin-bottom: 0;
        }

        .el-button {
          margin-left: 40px;
        }

        .selects {
          margin-left: 30px;
          width: 150px;
        }
      }
    }
  }

  .flexEd {
    position: fixed;
    left: 210px;
    top: 200px;
    width: 380px;
    height: 290px;
    background: #fff;
    opacity: 0.9;
    border-radius: 10px;
    padding: 10px 50px 0 20px;
    box-sizing: border-box;
    .flex {
      // display: flex;
      // justify-content: space-between;
      padding-top: 25px;
      .dis {
        display: inline-block;
        cursor: pointer;
        margin-left: 30px;
        color: green;
      }
    }
  }
}
</style>
